import Vue from 'vue/dist/vue.js';
import VueAxiosPlugin from 'vue-axios-plugin';
import Vuex from 'vuex';
Vue.use(Vuex);

const checkStatus = (response) => {
    if(response.status === 404){
        console.log(response.status)
    }
    if(response.status === 500){
        console.log(response.status)
    }

    // after your uniform request handler, you must return response
    return response
};
Vue.use(VueAxiosPlugin, {
    checkStatus: checkStatus
});
let codeType = (function () {

    let codeType_unit = {
        store:new Vuex.Store({
            state: {
                uploadFileNum:0
            },
            mutations: {
                uploadFileNumIncrease: (state)=> {
                    state.uploadFileNum++;
                },
                uploadFileNumReduce: (state)=> {
                    state.uploadFileNum--;
                }
            },
            getters:{
                getUploadFileNumData:(state)=>{
                    return state.uploadFileNum;
                }
            }
        }),
    };

    let codeName = {
        template:
            '<input id="nameInput" name="code" type="text" placeholder=" 输入特效名" :style=[inputStyle] />',
        data:function () {
            return {
                inputStyle:{
                    color:'#121212'
                }
            }
        }
    };

    let htmlComponent = {
        template:
        '<form id="htmlForm" :style=[inputStyle]>接收单个html文件: ' +
            '<input id="htmlInput" name="code" type="file" :style=[inputStyle] />' +
        '</form>' ,
        data:function () {
            return {
                inputStyle:{
                    color:'#ffffff'
                }
            }
        }

    };
    let cssComponent = {
        template:
        '<form id="cssForm" enctype="multipart/form-data" :style=[inputStyle]>接收单个css文件: ' +
            '<input id="cssInput" name="code" type="file" :style=[inputStyle] />' +
        '</form>' ,
        data:function () {
            return {
                inputStyle:{
                    color:'#ffffff'
                }
            }
        }

    };
    let jsComponent = {
        template:
        '<form id="jsForm" enctype="multipart/form-data" :style=[inputStyle]>接收单个js文件: ' +
            '<input id="jsInput" name="code" type="file" :style=[inputStyle] />' +
        '</form>' ,
        data:function () {
            return {
                inputStyle:{
                    color:'#ffffff'
                }
            }
        }
    };

    let multipleUploadComponent = {
        /*
        * 该组件用于上传多个文件,并且文件地址不会被记录在数据库中
        * */
        template:
        '<form id="multipleUploadForm" enctype="multipart/form-data" :style=[inputStyle]>接收多个上传文件:  ' +
        '<input id="multipleUploadInput" name="code" type="file" :style=[inputStyle] multiple="multiple"/>' +
        '</form>' ,
        data:function () {
            return {
                inputStyle:{
                    color:'#ffffff'
                }
            }
        }
    };

    let component = {
        props:['propsStyle'],
        template:
        '<div id="codeType" :style=[codeTypeStyle,propsStyle]>' +
            '<form id="codeTypeFrom" name="code" enctype="multipart/form-data">'+
                '<code-name></code-name>'+
                '<html-component></html-component>'+
                '<css-component></css-component>'+
                '<js-component></js-component>'+
                '<multiple-upload-component></multiple-upload-component>'+
                '<button type="button" :style=[buttonStyle] name="code" @click="upload">点击上传所有文件</button>'+
            '</form>'+
        '</div>',
        data:function () {
            return {
                codeTypeStyle:{
                    position:'relative',
                    display:'inline-block',
                    backgroundColor:'#353432',
                },
                inputStyle:{
                    color:'#ffffff'
                },
                buttonStyle:{
                    width:85+'px',
                    height:45+'px'
                }
            }
        },
        methods:{
            emit:function (uri,formID,inputID) {
                /*
                * uri:后端的接收路径
                * formID:form表单的id
                * */
                let _this = this;
                let htmlForm = document.getElementById(formID);
                if(document.getElementById(inputID).files.length!==0){
                    // console.log(uri);
                    this.$axios.post(uri,new FormData(htmlForm)).then(function (res) {
                        codeType_unit.store.commit('uploadFileNumReduce');
                        console.log(res);
                        _this.uploadOk();
                    });
                    codeType_unit.store.commit('uploadFileNumIncrease');
                }

            },
            upload:function (event) {
                /*负责上传文件*/
                let uri = 'codeUpload';
                let htmlType = '/html';
                let cssType = '/css';
                let jsType = '/js';
                let multipleUpload = 'multipleUpload';
                let codeNameInput = document.getElementById('nameInput');
                let id= '/coffeCat';
                let codeName = '/'+codeNameInput.value;
                this.emit(uri+htmlType+id+codeName,'htmlForm','htmlInput');
                this.emit(uri+cssType+id+codeName,'cssForm','cssInput');
                this.emit(uri+jsType+id+codeName,'jsForm','jsInput');
                this.emit(multipleUpload+id+codeName,'multipleUploadForm','multipleUploadInput');
            },
            uploadOk:function () {
               if(codeType_unit.store.getters.getUploadFileNumData===0){
                   console.log('upload ok');
               }
            }
        },
        components:{
            'html-component':htmlComponent,
            'css-component':cssComponent,
            'js-component':jsComponent,
            'code-name':codeName,
            'multiple-upload-component':multipleUploadComponent
        }
    };

    return {
        name:'code-type',
        component:component
    }
})();
export default codeType;